<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% include 'link_css.html' %}
    {% include 'head_script.html' %}
</head>
<body>
<div class="content-wrapper">


    <section class="content">

<div id="dialog">
        <div class="box box-info">
            <!-- /.box-header -->
            <!-- form start -->
            <form class="form-horizontal" action="{% url 'group_save' %}" method="POST">
                      {% csrf_token %}
                <div class="box-body">
                <div class="form-group">
                  <label for="name" class="col-sm-2 control-label">组名:</label>

                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="name" value="{{ obj.name }}">
                  </div>
                </div>
                <div class="form-group">
                  <label for="address" class="col-sm-2 control-label">描述:</label>

                  <div class="col-sm-10">
                    <input type="text" class="form-control" name="desc" value="{{ obj.desc }}">
                  </div>
                </div>
                <input type="hidden" name="id" value="{{ obj.id }}">
              </div>
                                <!-- Select multiple-->
                <div class="col-sm-10">
                    <p>select group members</p>
                <div class="form-group">
                    <label>可选项</label>
                  <select id="unselect" name="unselect" multiple style="width:160px; height:220px">
                      {% for host in unselect %}
                      <option value="{{ host.hostname }}">{{ host.hostname }}</option>
                      {% endfor %}
                  </select>
                    <label>组成员</label>
                  <select id="members" name="members" multiple style="width:160px; height:220px">
                    {% for host in members %}
                      <option value="{{ host.hostname }}">{{ host.hostname }}</option>
                  {% endfor %}
                  </select>
                </div>
                    <div class="form-group" align="center">
                    <input  type="button" value="添加到组" onclick="f1()">
                    <input  type="button" value="从组移除" onclick="f2()">
                        </div>
                    </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <button type="submit" class="btn btn-info pull-right">保存</button>
              </div>
              <!-- /.box-footer -->
            </form>
</div>
    </div>


    </section>

  </div>
{#回传参数至父层#}
<script type="text/javascript">
        var index = parent.layer.getFrameIndex(window.name);
        var success = {{ status }};
        if ( success == '1' ) {
            parent.$("#handle_status").val('1');
              parent.layer.close(index);
        } else if( success == '2' ) {
            parent.$("#handle_status").val('2');
            parent.layer.close(index);
        }
</script>
<script type="text/javascript">
    //左边选中项目移动到右边
    function f1(){
        // :selected
        $("#unselect option:selected").appendTo("#members");
    }
    //右边选中的项目移动到左边
    function f2(){
        $("#members option:selected").appendTo("#unselect");
    }
    //左边全部项目移动到右边
    function f3(){
        $("#unselect option").appendTo("#members");
    }
    function f4(){
        $("#members option").appendTo("#unselect");
    }

    //具体项目被双击需要移动到对方
    //页面加载完毕，就需要给每个项目绑定双击事件
    $(function(){
        //左边项目双击移动到右边
        //$("#movie option").dblclick(function(){
            //this
            //this 代表当前被双击项目的dom节点对象
        //    $(this).appendTo("#music");
        //});

        //右边项目双击移动到左边
        //$("#music option").dblclick(function(){
        //    $(this).appendTo("#movie");
        //});

        //问题：项目被双击移动到对方，再次双击不能返回
        //事件委派live解决上边问题
        $("#unselect option").live('dblclick',function(){
            $(this).appendTo("#members");
        });
        $("#members option").live('dblclick',function(){
            $(this).appendTo("#unselect");
        });

    });
</script>
</body>
</html>